<template>
  <view :style="colorStyle">
    <view class="infobox1" v-for="(item, index, key) in list" :key="key">
      <view class="block1 flex between">
        <view class="info1 flex aitems">
          <image :src="item.userAvatar" class="headimg" mode=""></image>
          <view class="tipbox1">
            <view class="tip1 c1F1F1F f32">
              {{ item.userNickName }}
            </view>
            <view class="tip2 flex aitems">
              <u-icon
                name="star-fill"
                size="20"
                color="var(--view-theme)"
                v-for="(items, indexs, keys) in item.goodsScore"
                :key="'star' + indexs"
              ></u-icon>
              <u-icon
                name="star-fill"
                size="20"
                color="var(--view-minorColor)"
                v-for="(items, indexs, keys) in 5 - item.goodsScore"
                :key="'star' + indexs"
              ></u-icon>
            </view>
          </view>
        </view>
        <view class="info2 c858585 f22">
          {{ item.createTime }}
        </view>
      </view>
      <view class="block2 c1F1F1F f32">
        <text>{{ item.content }}</text>
      </view>
      <view class="block3 flex aitems wrap">
        <image
          :src="items"
          v-for="(items, indexs) in item.img"
          :key="items"
          mode="aspectFill"
          @click="previewImage(index, indexs)"
        ></image>
      </view>
      <view class="block4 flex aitems">
        <image :src="item.goodsImg" mode="aspectFill" @click=""></image>
        <view class="info1">
          <view class="tipbox1 flex between c1F1F1F f24">
            <view class="tip1">
              {{ item.goodsName }}
            </view>
            <!-- 	<view class="tip2">
							x1
						</view> -->
          </view>
          <!-- 	<view class="tipbox2 c1F1F1F f24">
						￥162
					</view> -->
        </view>
      </view>
      <view class="block5 flex aitems" v-if="item.reply">
        <image src="@/static/img72.png" mode=""></image>
        <view class="info1 flex aitems">
          <view class="tip1 c1F1F1F f32 fontWeight"> 客服回复： </view>
          <view class="tip2 c1F1F1F f32">
            {{ item.reply ? item.reply : "暂无回复" }}
          </view>
        </view>
      </view>
    </view>

    <view class="" style="height: 100rpx"> </view>
    <nodata v-if="list.length == 0" />
  </view>
</template>

<script>
import { goodsCommentPage } from "@/servers/servers.js";
import { HTTP_STATUS } from "@/servers/config.js";
import { loading, go } from "@/utils/wxAPI";
import colors from "@/mixins/color";
export default {
  mixins: [colors],
  data() {
    return {
      total: 0,
      list: [],
      current: 1,
      options: {},
    };
  },
  async onLoad(options) {
    this.options = options;
    this.goodsCommentPage();
  },
  methods: {
    async goodsCommentPage() {
      loading();
      let { data } = await goodsCommentPage({
        current: this.current,
        size: 10,
        goodsId: this.options.id,
      });
      if (data.code == HTTP_STATUS.RUSELT_SUCCESS) {
        let list = data.data.records;
        this.total = data.data.total;
        list.map((item) => {
          item.img = item.img.split(",");
        });
        if (this.current == 1) {
          this.list = list;
        } else {
          this.list.push(...list);
        }
        setTimeout(() => {
          this.loadingPage = true;
        }, 500);
      }
      uni.stopPullDownRefresh();
      uni.hideLoading();
    },

    gourl(url) {
      go(url);
    },

    previewImage(index, indexs) {
      uni.previewImage({
        current: indexs,
        urls: this.list[index].img,
      });
    },
  },
  onReachBottom() {
    if (this.list.length == this.total) return;
    this.current += 1;
    this.goodsCommentPage();
  },
  onPullDownRefresh() {
    this.current = 1;
    this.goodsCommentPage();
  },
};
</script>
<style>
/* #ifdef MP-WEIXIN */
page {
  background: #f5f5f5;
}

/* #endif */
</style>
<style lang="scss" scoped>
page {
  background: #f5f5f5;
}

.infobox1 {
  margin: 24rpx 0 0;
  background: #fff;
  padding: 28rpx;

  .block1 {
    .headimg {
      width: 82rpx;
      height: 82rpx;
      border-radius: 50%;
    }

    .tipbox1 {
      margin-left: 24rpx;
      width: calc(100% - 24rpx - 82rpx);

      .tip1 {
      }

      .tip2 {
        margin: 12rpx 0 0;

        image {
          width: 28rpx;
          height: 28rpx;
          margin: 0 8rpx 0 0;
        }
      }
    }
  }

  .block2 {
    margin: 30rpx 0 0;
  }

  .block3 {
    margin: 30rpx 0 0;

    image {
      width: 190rpx;
      height: 190rpx;
      border-radius: 28rpx;
      margin: 0 24rpx 24rpx 0;
    }
  }

  .block4 {
    border-radius: 24rpx;
    background: #f5f5f5;
    padding: 16rpx;
    margin: 14rpx 0 0;

    image {
      width: 74rpx;
      height: 74rpx;
      border-radius: 16rpx;
    }

    .info1 {
      width: calc(100% - 74rpx - 16rpx);
      margin-left: 16rpx;

      .tipbox1 {
        .tip1 {
        }

        .tip2 {
        }
      }

      .tipbox2 {
        margin: 4rpx 0 0;
      }
    }
  }

  .block5 {
    margin: 37rpx 0 0;

    image {
      width: 56rpx;
      height: 56rpx;
    }

    .info1 {
      margin-left: 18rpx;
    }
  }
}
</style>
